import React from 'react';
import { List, SegmentedControl, WhiteSpace, WingBlank, ListView } from 'antd-mobile';
import { connect } from 'dva';
import moment from 'moment';
import _ from 'lodash';
import Container from '../components/Base/Container';
import ReactEcharts from '../components/Base/Echarts';
import MyIcon from '../components/Base/MyIcon';
import styles from './StatBonus.css';
import FilterControl from '../components/Base/FilterControl';
import { bonusList } from "../services/bonusService";

const ListItem = List.Item;


class Bonus extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      total_money: 1,
      bonus_money: 0,
      vip_bonus_money: 0,
      field: 'total_money',
    };
  }

  renderRow = (rowData, a, index) => {
    return (<ListItem
      onClick={() => {
      }}
    >
      <div className={styles.header}>
        <span className={styles.header_item}>{rowData.sale_name}</span>
        <span className={styles.header_span1}>{rowData.total_money}</span>
        <span className={styles.header_span1}>{rowData.bonus_money}</span>
        <span className={styles.header_span1}>{rowData.vip_bonus_money}</span>
      </div>
    </ListItem>);
  };


  filterControlsChange=(v) => {
    const branchId = v[0] !== '全部' ? v[0] : undefined;
    const month = moment(v[1]).format('YYYY-MM');

    this.props.dispatch({ type: 'bonus/fetchBonusList', payload: { branchId, month } });
  }

  handleClick = (e, col) => {
    const a = this.state[col];
    const b = a === 1 ? 0 : 1;
    this.setState((prevs, props) => ({
      [col]: b,
    }));
    this.setState({ field: col });
    let bonusList = this.props.bonusList;
    if (a === 1) {
      bonusList = _(bonusList).sortBy(col).reverse().value();
    } else {
      bonusList = _(bonusList).sortBy(col).value();
    }
    this.props.dispatch({ type: 'bonus/saveBonusList', payload: bonusList });
  }

  componentDidMount() {
    this.filterControlsChange(['全部']);
  }

  render() {
    const { user, bonusList } = this.props;
    const role = user.roles[user.roles.length - 1];
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    return (
      <Container title="导购提成">
        <div>
          <div>
            <FilterControl
              filterControlsChange={this.filterControlsChange}
              dispatch={this.props.dispatch}
              hidePickerBranch={role === 'manager'}
            />

            <ListView
              dataSource={dataSource.cloneWithRows(bonusList || [])}
              renderHeader={() => <div className={styles.header}>
                <span className={styles.header_item}>导购</span>
                <span className={styles.header_span1} onClick={e => this.handleClick(e, 'total_money')} >
                  <span>提成总计</span>
                  <span className={styles.sort}><img className={styles.sortIcon} src={this.state.field === 'total_money' ? require('../assets/sort2.png') : require('../assets/sort.png')} /></span>
                </span>
                <span className={styles.header_span1} onClick={e => this.handleClick(e, 'bonus_money')} >
                  <span>销售提成</span>
                  <span className={styles.sort}><img className={styles.sortIcon} src={this.state.field === 'bonus_money' ? require('../assets/sort2.png') : require('../assets/sort.png')} /></span>
                </span>
                <span className={styles.header_span1} onClick={e => this.handleClick(e, 'vip_bonus_money')} >
                  <span>拓客提成</span>
                  <span className={styles.sort}><img className={styles.sortIcon} src={this.state.field === 'vip_bonus_money' ? require('../assets/sort2.png') : require('../assets/sort.png')} /></span>
                </span>
              </div>}
              renderRow={this.renderRow}
              pageSize={20}
              initialListSize={20}
                  // scrollRenderAheadDistance={500}
              scrollEventThrottle={20}
                  // onEndReached={this.onEndReached}
                  // onEndReachedThreshold={10}
              useBodyScroll
            />
          </div>
          <WhiteSpace size="lg" />
        </div>
      </Container>
    );
  }
}


export default connect((state) => {
  return {
    bonusList: state.bonus.bonusList,
    user: state.auth.currentUser,
  };
},
  (dispatch) => {
    return {
      dispatch,
      /*fetchStatAchvRank(statAchvSelectedIndex) {
        dispatch({ type: 'stat/fetchStatAchvRank', payload: { statAchvSelectedIndex } });
      },*/
      /*saveStatAchvSelectedIndex(statAchvSelectedIndex) {
        dispatch({ type: 'stat/saveStatAchvSelectedIndex', payload: { statAchvSelectedIndex } });
      },*/
    };
  },
)(Bonus);
